<template>
	<view class="">
		<u-gap :height="gapHeight"></u-gap>
		<view class="inline" :style="{'padding': '0 '+ between + 'rpx'}">
			<button class="btn" 
			:style="[
				{'height': size + 'rpx'}, 
				{'borderRadius': round +'rpx'}, 
				{'backgroundColor': bgColor}, 
				{'color': color}, 
				{'fontSize': fontSize + 'rpx'}
			]"
			@click="action"
			>{{text}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CocoViewAction",
		data(){
			return {
				
			}
		},
		props: {
			text: {
				type: String,
				default: '确定'
			},
			gapHeight: {
				type: Number,
				default: 60
			},
			between: {
				type: Number,
				default: 30
			},
			size: {
				type: Number,
				default: 100
			},
			round: {
				type: Number,
				default: 10
			},
			bgColor: {
				type: String,
				default: '#65bbba'
			},
			color: {
				type: String,
				default: '#fff'
			},
			fontSize: {
				type: Number,
				default: 30
			}
		},
		methods: {
			action(){
				this.$emit('action')
			}
		}
	}
</script>

<style lang="scss">
	.btn{
		&::after{
			content: none;
		}
		display: flex;
		align-items: center;
		justify-content: center;
		&.button-hover{
			opacity: .9;
		}
	}
</style>
